<template>
  <div class="search-box">
    <van-search
      class="search"
      v-model="childValue"
      shape="round"
      :placeholder="placeholder"
      left-icon=""
      right-icon="none"
    />
    <i class="iconfont icon-fangdajing"></i>
  </div>
</template>

<script>
import { Search } from "vant";
export default {
  name: "Search",
  props: ["fatherValue", "placeholder"],
  data() {
    return {
      childValue: this.fatherValue,
    };
  },
  watch: {
    childValue(val) {
      console.log("childValue", val);
      this.$emit("input", this.childValue);
    },
    fatherValue(val) {
    //   console.log("fatherValue：" + val);
      this.childValue = val;
    },
  },
  components: {
    [Search.name]: Search,
  },
};
</script>

<style scoped>
@import url("../assets/iconfonts/iconfont.css");
.search-box {
  height: 40px;
  line-height: 40px;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  color: #abaeb3;
}

.search-box .search {
  width: 340px;
  padding-left: 0;
}
</style>